<template>
  <div id="ApplyLaboratory">
  <Row>  <!-- 步骤条 -->
  <Col offset="3">
      <Steps :current="current">
        <Step v-for="(item,index) in stepList " :key="index"  :title="item.title"  content="基础信息填写"></Step>
    </Steps> <!--  第一步 -->
    </Col>
    </Row>
    <Row>
    <Col offset="2">
    <Form v-if="current==0" style="margin-top: 20px" ref="formFoundation" :model="formFoundation" :rules="ruleValidate" :label-width="60" >
        <Row>
            <Col  :span="10">
               <FormItem class="FormItem_FormFoundation" v-for="(item,index) in formListA" :key="index"  :label="item.lable" :prop="item.prop">
                <Input v-if="item.type === 'input'" v-model="formFoundation[item.prop]" :placeholder="item.message"></Input>
            </FormItem>
        </Col>
        <Col :span="10">
           <FormItem class="FormItem_FormFoundation" v-for="(item,index) in formListB" :key="index"  :label="item.lable" :prop="item.prop">
            <Input v-if="item.type === 'input'" v-model="formFoundation[item.prop]" :placeholder="item.message"></Input>
            <RadioGroup v-if="item.type === 'RadioGroup'" v-model="formFoundation[item.prop]">
                <Radio label="0">男</Radio>
                <Radio label="1">女</Radio>
            </RadioGroup>
        </FormItem>
     </Col>
</Row>
</Form><!-- 第二步 -->
<Form v-if="current==1" ref="formIndividual" v-model="formIndividual" >
 <Row>
     <Col span="6"style="margin-top: 20px;">
        <FormItem v-for="(item,index) in formListC" :key="index" :prop="item.prop" >
            <Row>
                <Col :span="10" >
                    <span style="color:red">*</span>
                    <Dropdown   @on-click="selectGrade">
                        <a href="javascript:void(0)">
                           <span>{{item.grade}}</span>
                           <Icon type="arrow-down-b"></Icon>
                       </a>
                       <DropdownMenu slot="list"  >
                        <DropdownItem :disabled=item.disabled v-for="(item,key) in gradesList" :key="key" :name="item.gradeName+index">{{item.gradeName}}</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </Col>
            <Col :span="7">
                <Input size="small"  v-model="item.gradeScore"></Input>
            </Col>
        </Row>
        <Row>
            <Col>
                <div v-if="index===length"  @click="addGrade()">
                   <Icon  type="ios-plus-outline iconStyle"></Icon>
               </div>
           </Col>
       </Row>
   </FormItem>
</Col>
<Col  span="15" style="margin-top: 10px">
   <FormItem :label="formIndividual.label" prop="mark"  >
    <Input  maxlength="250"  v-model="formIndividual.remark" type="textarea" :autosize="{minRows: 8,maxRows: 10}" placeholder="最多120个字"></Input>
</FormItem>
</Col>
</Row>
</Form><!-- 第三步 -->
<Form v-if="current==2" ref="formApply" :model="formApply" style="margin-top:20px" :label-width="160">
    <Row>
        <Col span="22" offset="1">
         <FormItem :label="formApply.label">
            <Input maxlength="250" style="margin-top: 30px;margin-left: -100px;" v-model="formApply.reason" type="textarea" :autosize="{minRows: 8,maxRows: 10}" placeholder="最多300字"></Input>
        </FormItem>
    </Col>
</Row>
</Form><!-- 预览 -->
<div v-if="current==3" id="div_preview" v-model="formFoundation" >
    <Row   class="row_Preview">
        <Col offset="1">
            <Col span="8" v-for="(item,index) in formListA" :key="index">
                <span style="font-size: 17px;color:#378EE8; text-shadow: 1px 1px 0px #D6E4E7" class="font_Prview">{{item.lable}}：</span><span>{{formFoundation[item.prop]}}</span>
            </Col>
        </Col>
    </Row>
    <Row class="row_Preview">
     <Col offset="1">
        <Col span="8" v-for="(item,index) in formListB" :key="index">
            <span  style="font-size: 17px;color:#378EE8; text-shadow: 1px 1px 0px #D6E4E7" class="font_Prview">{{item.lable}}：</span><span>{{formFoundation[item.prop]}}</span>
        </Col>
    </Col>
</Row>
<Row class="row_Preview" v-model="formListC">
    <Col offset="1" span="2">
       <div>
         <span  style="font-size: 17px;color:#378EE8; text-shadow: 1px 1px 0px #D6E4E7" class="font_Prview">成绩：</span>
     </div>
 </Col>
 <table style="border:1px solid #EDA448;width: 80%;  border-collapse:collapse;box-shadow : #DADADA 2px 2px 1px;text-align: center">
 <tr>
   <td  style="border:1px solid #DADADA;"  v-for="(item,index) in formListC" :key="index" >{{item.grade}}</td>
 </tr>
 <tr>
   <td style="border:1px solid #DADADA " v-for="(item,index) in formListC" :key="index" >{{item.gradeScore}}</td>
 </tr>
 </table>
 <!-- <Col  :span='gradeSpan' v-for="(item,index) in formListC" :key="index">
   <div>
     <span>{{item.grade}}：{{item.gradeScore}}</span>
 </div>
</Col> -->
</Row>
<Row>
<Col offset="1">
 <Tabs  style="width: 70%;font-size: 17px;color:#89B3E3; text-shadow: 1px 1px 0px #D6E4E7">
        <TabPane :label="formIndividual.label">
        <div style="font-size: 15px;color:black; text-shadow: 1px 1px 0px #D6E4E7" id="div_reason">{{formIndividual.remark}}
        </div>
        </TabPane>
        <TabPane :label="formApply.label">
        <div style="font-size: 15px;color:black; text-shadow: 1px 1px 0px #D6E4E7">{{formApply.reason}}</div></TabPane>
    </Tabs>
</Col>
</Row>
</div>
<div id="div_Buttom">
 <Button v-if="current!==0" type="primary" @click="preStep()">上一步</Button>
 <Button type="primary" @click="handleSubmit(msg)" >{{nextStep}}</Button>
</div>
</Col>
</Row>
</div>
</template>
<script>
    import {postDataToServer} from "../../assets/js/post.js"
    import gradesList from "../../assets/grades.json"
    export default {
        name:'ApplyLaboratory',
        created()
        {
           this.gradesList=gradesList;
           console.log(this.gradesList);
        },
        data () { // 表单验证
            const validateNumber = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('学号不能为空'));
                }
                if (value.length !== 10) {
                    callback(new Error('您的学号有误'));
                } else {
                    callback();
                }
            };
            const validateName = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('姓名不能为空'));
                }
                if (value.length > 8) {
                    callback(new Error('您的姓名有误'));
                } else {
                    callback();
                }
            };
            return { // 表单内容
                length:2,
                formListA:[
                {
                    lable:'姓名',
                    prop:'name',
                    message:'请输入姓名',
                    type:'input',
                    span:'10'
                },
                {
                    lable:'学院',
                    prop:'college',
                    message:'请输入学院名称',
                    type:'input',
                    span:'10'
                },
                {
                    lable:'学号',
                    prop:'num',
                    message:'请输入学号',
                    type:'input',
                    span:'10'
                }],
                gradeSpan:6,
                formListC:[
                {
                    grade:"高数",
                    gradeScore:""
                },
                {
                    grade:"C语言",
                    gradeScore:""
                },
                {
                    grade:"英语",
                    gradeScore:""
                },],
                stepList:[
                {
                    title:"进行中"
                },
                {
                    title:"待进行"
                },
                {
                    title:"待进行"
                }],
                formListB:[
                {
                    lable:'性别',
                    prop:'sex',
                    message:'',
                    type:'RadioGroup',
                    span:'10'
                },
                {
                    lable:'班级',
                    prop:'class',
                    message:'请输入班级',
                    type:'input',
                    span:'10'
                },
                {
                    lable:'邮箱',
                    prop:'conect',
                    message:'请输入邮箱号码',
                    type:'input',
                    span:'10'
                }],
                formIndividual:{
                    label:"简介",
                    remark:"11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111",
                },
                formFoundation: {
                    name:'',
                    college:'',
                    num: '',
                    sex: '',
                    class: '',
                    conect:''
                },
                gradesList:[],
             formApply:{
                label:'申请加入实验室的理由：',
                reason:"",
            },
            grades:"",
            msg:"formFoundation",
            nextStep:"下一步",
            current:0,
            ruleValidate: {
                name: [
                { required: true, validator: validateName,trigger:'submit'}],
                conect: [
                { required: true, message: '邮箱不能为空',trigger: 'submit' },
                { type: 'email', message: '邮箱格式不正确',trigger: 'blur' }],
                num: [
                { required:true,validator: validateNumber,trigger: 'blur' }],
                class: [
                { required: true, message:"请填写班级", trigger: 'submit' }],
                sex: [
                { required: true, message: '请选择性别', trigger: 'submit' }],
                college:[
                { required: true, message:'请填写学院名称',trigger: 'submit'}]
            }
        }
    },
    methods: {//提交表单
            handleSubmit (name) {
                if( this.nextStep==="确定")//关闭框，并提交数据
                {
                  this.$emit("returnData");
                  this.postData();
                  return;
                }
                var formData=1;
                switch(name)
                {
                   case "formFoundation":
                   {
                    if(formData=this.checkFormFoundationData(name))
                    this.msg="formIndividual";
                    break;
                   }
                   case "formIndividual":
                   {
                     if(formData=this.checkFormIndividualData())
                     this.msg="formApply";
                     break;
                   }
                   case "formApply":
                        {
                           formData=1;
                           this.nextStep="确定";
                           this.msg="";
                           break;
                       }
                   }
                    if(!formData)
                    {
                       return;
                    }
                      this.stepList[this.current].title="已完成";
                      this.current++;
                    if(this.current<(this.stepList.length-1))
                    {
                        this.stepList[this.current].title="进行中";
                    }
          },
          checkFormFoundationData(name)
          {
            var flag=0;
            this.$refs[name].validate((valid) => {
                if (valid) {

                    flag=1;
                 }
            })
               if(flag)
               {
                return 1;
               }
          },
          checkFormIndividualData ()
          {
            for(var i=0,n=this.formListC.length;i<n;i++ )
            {
                for(var j in this.gradesList)//验证成绩
                {
                if(this.gradesList[j].gradeName===this.formListC[i].grade)
                {
                    if(this.formListC[i].gradeScore>this.gradesList[i].maxGrade||this.formListC[i].gradeScore==="")
                    {
                          this.$Message.error('您的成绩填写有误');
                          return;
                    }
                }
               }
            }
             for(var i=0,n=this.formListC.length;i<n;i++)
                    {
                        var item=this.formListC[i]
                        for(var j in item)
                        {
                            this.grades+=item[j]+',';
                        }
                          this.grades =   this.grades.substring(0,this.grades.lastIndexOf(','));
                          this.grades+=";"
                    }
             this.length=this.formListC.length;//改变span
                 if(this.length===4||this.length===5)
                 {
                    this.gradeSpan=4;
                }
            return 1;
          },
          preStep()
          {
            this.nextStep="下一步";
            this.current--;
            switch(this.msg)
            {
                case "formIndividual":
                {
                    this.msg="formFoundation";
                    break;
                }
                case "formApply":
                {
                   this.msg="formIndividual";
                   break;
               }
               case "":
               {
                this.msg="formApply";
                break;
            }
        }
    },//请求数据
            postData()
            {
                var params={};
                params.url="APPLY_ADD";
                params.parameter=this.formFoundation;
                params.parameter.grades=this.grades;
                params.parameter.remark=this.formIndividual.remark;
                params.parameter.reason=this.formApply.reason;
                console.log(typeof params.parameter.sex);
                postDataToServer(params).then((data)=>{
                    console.log(data);
                });
            },//下拉选成绩
            selectGrade(name)
            {
                for(var i=0,n=this.formListC.length;i<n;i++)
                {
                    var item=name.indexOf(i);
                    if(item>0)
                    {
                        name = name.substring(0, name.lastIndexOf(i));
                        for(var j=0,m=this.gradesList.length;j<m;j++)
                        {
                            if(this.gradesList[j].gradeName===name)
                            {
                                if(this.gradesList[j].disabled)
                                {
                                    return;
                                }
                                 this.gradesList[j].disabled=true;
                            }
                                else
                                {
                                    var fomName=this.formListC[i].grade;
                                    if(this.gradesList[j].gradeName==fomName)
                                    {
                                        this.gradesList[j].disabled=false;
                                        this.formListC[i].grade=name;
                                    }
                                }
                        }
                    }
              }
            },
                    addGrade()
                    {
                        var item={};
                        this.length=this.formListC.length;
                        for(var i=0,n=this.gradesList.length;i<n;i++)
                        {
                            if(this.gradesList[i].disabled===false)
                            {
                                item.grade=this.gradesList[i].gradeName;
                                item.gradeScore=""
                                this.gradesList[i].disabled=true;
                                break;
                            }
                        }
                        this.formListC.push(item);
                        if(this.formListC.length===5)
                        {
                            this.length=false;
                        }
                    },
                }
            }
        </script>
        <!-- Add "scoped" attribute to limit CSS to this component only -->
        <style scoped>
            #ApplyLaboratory
            {
                height: 95%;
               /* margin-left: 60px;*/
                width: 95%;
            }
            .font_Prview
            {
                font-size: 15px;
            }
            .iconStyle{
                font-size: 20px;
                color:red;
                float: left;
            }
            .iconStyle:hover
            {
                text-shadow: 1px 1px 1px #6BADC1;
                cursor:pointer;
            }
            .ivu-form-item
            {
                margin-bottom: 10px
            }
            #div_reason
            {
                width: 90%;
                word-wrap: break-word;
            }
            #div_preview
            {
                font-size:13px;
                text-align:left;
                margin-top:20px;
            }
            .row_Preview{
                padding: 10px;
            }
            .FormItem_FormFoundation
            {
                padding: 15px;
            }
            #div_Buttom{
                float: right;
                margin-bottom: 20px;
                margin-left: 20px}
            </style>